<template id="dashboard-numSquare">
	<div>
		<v-row class="pt-2">
			<v-col class="headline" cols="12">运营状况</v-col>
		</v-row>
		<v-row>
			<v-col cols="auto" v-for="(item,index) in  operatingConditions" :key="index">
				<v-card flat width="145px" :href="item.href">
					<v-card-text class="pb-1"> {{item.title}} </v-card-text>
					<v-card-text class="black--text text--lighten-1 display-1 pa-1 pl-4"> {{item.value}} </v-card-text>
				</v-card>
			</v-col>
		</v-row>
		<v-row>
			<v-col class="headline" cols="24">风险状况</v-col>
		</v-row>
		<v-row>
			<v-col cols="auto" v-for="(item,index) in  riskSituation" :key="index">
				<v-card class="pb-1" flat width="145px">
					<v-card-text> {{item.title}} </v-card-text>
					<v-card-text class="black--text text--lighten-1 display-1 pa-1 pl-4"> {{item.value}} </v-card-text>
				</v-card>
			</v-col>
		</v-row>
	</div>
</template>

<script type="module">
	Vue.component("dashboard-numSquare", {
		template: "#dashboard-numSquare",
		props: {},
		data: () => ({
			operatingConditions: [
				{
					key: "carTotal",
					title: "全部车辆",
					value: "10000",
					href: `basicManagement`,
				},
				{
					key: "rentTotal",
					title: "已租车辆",
					value: "5000",
					href: "",
				},
				{
					key: "noRentTotal",
					title: "未租车辆",
					value: "5000",
					href: "",
				},
				{
					key: "scrapTotal",
					title: "报废车辆",
					value: "1",
					href: "",
				},
				{
					key: "repairTotal",
					title: "在修车辆",
					value: "1",
					href: "",
				},
				{
					key: "customerTotal",
					title: "全部客户",
					value: "300",
					href: "",
				},
				{
					key: "rentCustomerTotal",
					title: "已租客户",
					value: "300",
					href: "",
				},
			],
			riskSituation: [
				{
					key: "repairTotal",
					title: "违章车辆",
					value: "10000",
					href: "",
				},
				{
					key: "pendingRenewalTotal",
					title: "需续保车辆",
					value: "5000",
					href: "",
				},
				{
					key: "pendingInspectionTotal",
					title: "需年检车辆",
					value: "5000",
					href: "",
				},
				{
					key: "overdueCustomerTotal",
					title: "逾期客户",
					value: "3",
					href: "",
				},
			],
		}),
		computed: {},
		watch: {},
		async created() {},
		async mounted() {},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "fetchConditionData":
						this.fetchConditionData(uiActionData);
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},
			// 赋值
			fetchConditionData(data) {
				this.operatingConditions = this.operatingConditions.map(item => {
					item.value = data[item.key] || 0;
					return item;
				});
                
				this.riskSituation = this.riskSituation.map(item => {
					item.value = data[item.key] || 0;
					return item;
				});
			},
		},
	});
</script>
